<template>
  <!-- 银行流水 -->
  <div class="jeecg-basic-table jeecg-basic-table-form-container">
    <a-form @keyup.enter.native="searchQuery">
      <a-row :gutter="8" type="flex">
        <a-col flex="135px">
          <a-form-item label="部门" :label-col="{ style: { width: '40px' } }" :wrapper-col="{ span: 18 }">
            <JDictSelectTag v-model:value="queryParam.ddlxIds" :defaultValue="queryParam.ddlxIds" mode="multiple" :maxTagCount="0" dictCode="ddlxType@ddlxUser" placeholder="请选择" :autofocus="false" @change="changSelect"/>
          </a-form-item>
        </a-col>

        <a-col flex="360px">
          <a-form-item label="" :label-col="{ style: { width: '70px' } }" :wrapper-col="{ style: { width: '260px' } }">
            <a-select v-model:value="queryParam.today" default-value="0" id="today" style="width: 90px; margin-right: 5px" @change="todayChange" >
              <a-select-option value="0">记账日期</a-select-option>
              <a-select-option value="1">出团日期</a-select-option>
            </a-select>
            <a-date-picker
              v-model:value="queryParam.jzsjBegin"
              :disabled-date="disabledStartDate"
              valueFormat="YYYY-MM-DD"
              placeholder=""
              style="width: 110px"
            /> ~
            <a-date-picker
              v-model:value="queryParam.jzsjEnd"
              :disabled-date="disabledEndDate"
              valueFormat="YYYY-MM-DD"
              placeholder=""
              style="width: 110px"
            />
          </a-form-item>
        </a-col>

        <a-col flex="195px">
          <a-form-item label="订单编号" :label-col="{ style: { width: '70px' } }" :wrapper-col="{ span: 17 }">
            <a-input placeholder="" v-model:value.trim="queryParam.orderId"></a-input>
          </a-form-item>
        </a-col>

        <a-col flex="auto" style="float:right; width:180px;">
          <span style="float:right;overflow:hidden;" class="table-page-search-submitButtons">
            <a-button type="primary" @click="searchQuery" preIcon="ant-design:search">查询</a-button>
            <a-button type="default" @click="searchReset" preIcon="ant-design:reload-outlined" style="margin-left: 8px">重置</a-button>
          </span>
        </a-col>
      </a-row>

    </a-form>
  </div>

  <!-- table区域-begin -->
  <BasicTable @register="registerTable" :onRowClick="handleClick" :onRowDbClick="handleDblclick" :rowClassName="rowClassName">

  </BasicTable>
  <!-- table区域-end-->


</template>

<script lang="ts" setup>
import { ref, computed, unref, reactive, toRaw } from "vue";
import { BasicTable, TableAction, ActionItem, BasicColumn } from "/@/components/Table";
import { useModal } from "/@/components/Modal";
import { useListPage } from "/@/hooks/system/useListPage";
import { render } from "/@/utils/common/renderUtils";
import { bankRunninglist, deleteBankRunning, getImportUrl } from "/@/views/full/bank/types/bank.api";
import { momentSearchQueryDate } from "/@/utils/dateUtil";

import moment from 'dayjs'
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
import BankRunningModal from './modules/BankRunningModal.vue';

//初始化 -------------------------------------------------------------
//定义查询表单，查询条件
const queryParam = reactive({
  ddlxIds: "",
  today: "0", //未审
  jzsjBegin: momentSearchQueryDate("sub"),
  jzsjEnd: momentSearchQueryDate("add"),
  shbj: "0",
  bankId: "",
  sflx: "",
  insider: "0",
  beginJe: "",
  endJe: "",
  orderId: "",
  dfhm: ""
})


/* 日期参数 */
function disabledStartDate(beginDate) {
  const endDate = queryParam.jzsjEnd
  if (!beginDate || !endDate) {
    return false
  }
  return beginDate.valueOf() > moment(endDate).valueOf()
}

function disabledEndDate(endDate) {
  const beginDate = queryParam.jzsjBegin
  if (!endDate || !beginDate) {
    return false
  }
  return moment(beginDate).valueOf() > endDate.valueOf()
}

function todayChange() {
  if (queryParam.today == '1') {
    queryParam.shbj = '1'
  } else {
    queryParam.shbj = '0'
  }
}

//订单列表
const statusFmt = ({text}: { text: any }) => {
  if (text) {
    const color = text == '0' ? 'green' : text == '1' ? 'red' : 'green';
    const value = text == '0' ? '未审' : text == '1' ? '已审' : '未审';
    return render.renderTag(value, color)
  }
}
//订单列表 - 表头
const columns: BasicColumn[] = [
  { title: "状态", align: "center", dataIndex: "shbj", width: 55, customRender: statusFmt,},
  { title: "部门", align: "center", dataIndex: "ddlx", width: 75, customRender:({text}) => render.renderDict(text, 'ddlxType') },
  { title: "订单号", align: "center", dataIndex: "orderId", width: 110, className:"text-red-500"},
  { title: "收支账户", align: "left", dataIndex: "djm", width: 180},
  { title: "方式", align: "center", dataIndex: "sffs", width: 60, customRender:({text}) => render.renderDict(text, 'sffsType') },
  { title: "记帐时间", align: "center", dataIndex: "jzsj", width: 90},
  { title: "收入", align: "right", dataIndex: "srje", width: 91, className:"text-red-500"},
  { title: "支出", align: "right", dataIndex: "zcje", width: 91, className:"text-green-500"},
  { title: "对方户名", align: "center", dataIndex: "dfhm", width: 110},
  { title: "对方帐号", align: "center", dataIndex: "dfzh", width: 100},
  { title: "操作人", align: "center", dataIndex: "lrr", width: 60},
  { title: "录入时间", align: "center", dataIndex: "lrsj", width: 90},
  { title: "备注", align: "left", dataIndex: "bz", width: 90},
]

function searchQuery() {
  setProps({searchInfo:toRaw(queryParam)});
  reload()
}

function searchReset() {
  Object.assign(queryParam, {ddlxIds: '', ddzt: '', ywlx: ''});
  reload();
}

function handleSummary(tableData: Recordable[]) {
  const res = getRawDataSource()
  if (res) {
    return getRawDataSource().summary;
  } else {
    return [];
  }
}

// 列表页面公共参数、方法
const {prefixCls, tableContext, onImportXls} = useListPage({
  designScope: 'bankrunning-list',
  tableProps: {
    api: bankRunninglist,
    columns: columns,
    size: 'small',
    showTableSetting: false,
    showIndexColumn: true,    //行号
    showActionColumn: false,
    useSearchForm: false,
    resizeHeightOffset: 40,
    showSummary: true,
    summaryFunc: handleSummary
  },
  importConfig: {
    url: getImportUrl,
    success: () => reload(),
  },
})

//注册table数据
const [registerTable, {reload, setProps, getRawDataSource, redoHeight}] = tableContext

//新增订单
const [registerBankRunningAdd, {openModal: openBankRunning}] = useModal();

//单击行
let selectRows = reactive<any>({id: '', username: ''});
function handleClick(record) {
  selectRows.id = record.id
  selectRows.username = record.username
}

//双击行
function handleDblclick(record) {
  //alert("handleDblclick" + record.id);
}

function rowClassName(record, index) {
  return record.id === selectRows.id ? 'row-selected' : '';
}

function handleCreate() {
  openBankRunning(true, { isUpdate: false });
}

function handleEdit() {
  let record = {id: selectRows.id}
  openBankRunning(true, { isUpdate: true, record });
}

//新增编辑成功后，刷新列表
function modalFormOk() {
  searchQuery()
}

/**
 * 删除事件
 */
async function handleDelete() {
  let record = {id: selectRows.id}
  await deleteBankRunning(record, reload);
}

function onExportXls() {

}

//部门下接框
function changSelect() {
  //有选择操作
  if (queryParam.ddlxIds && queryParam.ddlxIds.length > 0) {
    //shbjDisabled.value = true;
    queryParam.shbj = "1";
  } else {
    //shbjDisabled.value = false;
    queryParam.shbj = "";
  }
}
</script>
<style scoped>

</style>
